<template>
	<div class="zhengtuojianhuo">
		<van-nav-bar :fixed="true" class="navBar" title="装车配送" left-arrow @click-left="$router.go(-1)"></van-nav-bar>



		<div class="goodsFromWarp" style="padding-bottom:5px;">
				<div class="goodsInputWarp">
						<div class="goodsInputLabel" style="width:35%;">
							<div class="goodsInputBorder"></div>
							<div class="skuName" style="width: 120px;">装车门店：</div>
						</div>
						<!-- @input="onInput" -->
						<van-field
							 clearable
							 class="skuInput"
							 v-model="editForm.ck_storeid"
							 placeholder="请填写装车门店"
							 @keyup="onEnter($event,do_inputspbar)"
						 />
						 <div class="searchBtn">
						 	<button :disabled="isdisabled"  @click.stop="_getStoreBtn()" >
						 		<van-icon name="ellipsis" color="#1989fa"  />
						 	</button>
						 </div>
				</div>

				<div class="goodsInputWarp">
						<div class="goodsInputLabel" style="width:35%;">
							<div class="goodsInputBorder"></div>
							<div class="skuName" style="width: 120px;">出库容器：</div>
						</div>
						<van-field
							@keyup="onEnter($event,do_inputspJhrd)"
							 class="skuInput"
							 v-model="editForm.jhrq"
							 placeholder="请填写出库容器"
               clearable
						 />
						 <div class="searchBtn">
						 	<button :disabled="isdisabled"  @click.stop="_getWZCBtn('DD')" >
						 		<van-icon name="ellipsis" color="#1989fa"  />
						 	</button>
						 </div>
				</div>


				<div class="storeWarp" >

					<van-row class="goodsNameWarp">
							<span class="label">单据类型：</span>
							<span class="value"> {{skuRow.djtype == 1?'波次单':'直通单'}}_{{skuRow.bill}}</span>
					</van-row>


					<van-row class="goodsName">
					  <van-col span="24"> <span>门店：</span> {{skuRow.pdz}}_{{skuRow.storename}}</van-col>
					</van-row>



					<van-row class="goodsName">
					  <van-col span="12"> <span>已拣货：</span> {{skuRow.jsrq}}</van-col>
						<van-col span="12"> <span>拣货中：</span> {{skuRow.jhrq}}</van-col>
					</van-row>

					<van-row class="goodsName">
						<van-col span="12"> <span>已复核：</span> {{skuRow.fhrq}}</van-col>
					  <van-col span="12"> <span>已装车：</span>{{skuRow.zcrq}}</van-col>
					</van-row>

					<van-row class="goodsName">
					  <van-col span="12"> <span>总容器数：</span> {{skuRow.rqtot}}</van-col>
					  <van-col span="12"> <span>装车人：</span> {{skuRow.oper_zc}}</van-col>
					</van-row>
				</div>



				<div class="savefooterBtn">
					<van-button type="info" :disabled="isdisabled" @click="zhuangcheQueRen()">装车确认</van-button>
				</div>
		</div>

		<!-- <div class="skuBtn">
			<van-button type="info" :disabled="isdisabled" @click="zhuangcheBillBtn()">查询</van-button>
			<van-button type="info" :disabled="isdisabled" @click="zhuangCheSearchBtn()">装车查询</van-button>
		</div> -->


   <div class="tableWarp">
    <data-table
			:table-data="yzcTableData"
			:columns="skuColumns"
			height="calc(100vh - 200px)"
		/>
   </div>


		<table-popup
			v-model="isCarVisible"
			title="门店列表"
			:table-data="tableData"
			:columns="columns"
			@select="selectStoreClick"
		/>

		<!-- 未装车列表 -->
		<table-popup
			v-model="isWZCCarVisible"
			title="未装车列表"
			:table-data="wzcTableData"
			:columns="wzcColumns"
			@select="selectWZCCarClick"
		/>

		<van-dialog v-model="carMessageIsShow" title="提示" show-cancel-button @confirm = "_getZhuangCheBaoCun()" confirmButtonColor="#1989fa">
			<div style="width: 100%;display: flex;flex-direction: column;align-items: center;">
				<div>
					<p class="messageConTitle">门店: {{editForm.ck_storeid}}</p>
					<p class="messageConTitle">容器记录数: {{message.hznum}}</p>
					<p class="messageConTitle">商品总数: {{message.jytotqty}}</p>
					<p class="messageConTitle">是否继续？</p>
				</div>
			</div>
		</van-dialog>


	</div>
</template>

<script>
import DataTable from '@/components/DataTable.vue'
import TablePopup from '@/components/TablePopup.vue'


export default {
    name: 'zhuangchepeisong',
    data() {
    return {
			editForm:{
				ck_storeid:'',
				djtype:'',
				bill:'',
				jhrq:'',
				yjtotqty:'',
			},
			skuRow:{},
			isdisabled:false,
			tableData:[],
			rongqiData:{},
			isCarVisible:false,
			index:0,
			wzcTableData:[
				{
					jhrq:''
				}
			],
			yzcTableData:[
				{
					sp:''
				}
			],
			isWZCCarVisible:false,
			timeoutId:'',
			change1dt:null, change1data:null, //记录时间和字符串
			change2dt:null, change2data:null,
			carMessageIsShow:false,
			message:{},
      skuColumns: [
        { prop: 'jhrq', label: '容器标签', width: '120' },
        { prop: 'sp', label: '商品', width: '200' },
        { prop: 'tpack', label: '总箱数', width: '100' },
        { prop: 'tqty', label: '总散数', width: '100' },
        { prop: 'fh', label: '复核人', width: '100' },
        { prop: 'zc', label: '装车人', width: '100' }
      ],
			columns: [
				{ prop: 'ddh', label: '单号店', width: '120' },
				{ prop: 'storename', label: '店名', width: '150' },
				{ prop: 'pdz', label: '拣货单号', width: '120' },
				{ prop: 'zcrq', label: '装车容器', width: '120' },
				{ prop: 'jsrq', label: '结束容器', width: '120' },
				{ prop: 'rqtot', label: '总容器数', width: '100' },
				{ prop: 'packs', label: '总箱', width: '80' },
				{ prop: 'fhrq', label: '已复核', width: '80' },
				{ prop: 'jhrq', label: '拣货中', width: '80' }
			],
			wzcColumns: [
				{ prop: 'jhrq', label: '容器标签', width: '120' },
				{ prop: 'sp', label: '商品', width: '200' },
				{ prop: 'tpack', label: '总箱数', width: '100' },
				{ prop: 'tqty', label: '总散数', width: '100' },
				{ prop: 'fh', label: '复核人', width: '100' },
				{ prop: 'jh', label: '拣货人', width: '100' }
			],
		};
  },
	watch:{

	},
	computed: {
	   ryuser: function(){
	     return this.GWO(true).gUSER;
	   }
	},
  methods: {
		do_inputspbar(pmtxt){
			console.log(pmtxt)  //扫描枪获取的参数
			this.editForm.ck_storeid = pmtxt
			this._getStoreBtn()
		},
		do_inputspJhrd(pmtxt){
			this.editForm.jhrq = pmtxt
			this._getWZCBtn('SM')
		},
		_getStoreBtn(){
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_y_jianhuo',
				'i':this.FNULLE([
				'opmode','Y_ZCPS_qrystoreid',
				'kqid', _self.ryuser.kqid,
				'czyid',_self.ryuser.operatorid,
				'ck_storeid',_self.editForm.ck_storeid,

				])
				},'查询出车登记单号',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					_self.tableData = rtn_json_obj
					if(_self.tableData.length == 0) return _self.$dialog.alert({
						title:'提示',
						message:'暂未查到装车门店',
					})
					if(_self.tableData.length ==1){
              _self.editForm.ck_storeid  	= rtn_json_obj[0].ck_storeid
							_self.editForm.djtype  			= rtn_json_obj[0].djtype
							_self.editForm.bill  				= rtn_json_obj[0].bill
              _self.editForm.oper_zc  		= rtn_json_obj[0].oper_zc
							_self.zhuangcheBillBtn();
              _self._getYZCList()
					}else{
						_self.isCarVisible = true
						console.log("查询出车登记单号")
						console.log(rtn_json_obj)
					}

				}
			});
		},
		selectStoreClick(row){  //选择门店
			this.editForm.ck_storeid  = row.ck_storeid
			this.editForm.djtype  			= row.djtype
			this.editForm.bill  			= row.bill
			this.isCarVisible = false
			this.zhuangcheBillBtn();
		},
		zhuangcheBillBtn(){  //查看是否能装车
			console.log(this.editForm)
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_y_jianhuo',
				'i':this.FNULLE([
				'opmode','Y_ZCPS_qrybill',
				'kqid', _self.ryuser.kqid,
				'czyid',_self.ryuser.operatorid,
				'ck_storeid',_self.editForm.ck_storeid,
				'djtype',_self.editForm.djtype,
				'bill',_self.editForm.bill,
				])
				},'查询出车登记单号',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					console.log(rtn_json_obj)
					_self.skuRow = rtn_json_obj[0]
					console.log(_self.skuRow)
					if(_self.skuRow.fhrq > 0 || _self.skuRow.zcrq > 0){
						// 1.已装车容器和已复核容器 大于0
						// 不处理
						_self._getYZCList()
					}else if(_self.skuRow.jsrq > 0){
						// 2.已结束容器 大于0
						_self.$dialog.confirm({
						  title: '提示',
						  message:'库区：'+ _self.ryuser.kqid +'门店：' + _self.skuRow.ck_storeid +'一个托盘都未复核,是否先复核再装车?',
							confirmButtonColor:"#1989fa"
						}).then(() => {
						  _self.skuRow = {}
							_self.editForm.ck_storeid = ''
						}) .catch(() => {

						});
					}else if(_self.skuRow.jhrq > 0){
						// 3拣货中容器 大于0）
						_self.$dialog.alert({
							title: '提示',
							message:'库区：'+ _self.ryuser.kqid +'门店：' + _self.skuRow.ck_storeid +'正在拣货,复核完成后再装车!',
							theme: 'round-button',
							confirmButtonColor:"#1989fa"
						}).then(() => {
								_self.skuRow = {}
								_self.editForm.ck_storeid = ''
						});
					}else if(_self.skuRow.rqtot > 0){
						// 总容器数 等于0
						_self.$dialog.alert({
							title: '提示',
							message:'库区：'+ _self.ryuser.kqid +'本波次，门店：' + _self.skuRow.ck_storeid +'已经全部装车!',
							theme: 'round-button',
							confirmButtonColor:"#1989fa"
						}).then(() => {
								_self.skuRow = {}
								_self.editForm.ck_storeid = ''
						});
					}
				}
			});
		},
		_getYZCList(){
				var _self = this;
				var ldemodata = [{retval:0, errmsg:'返回数据集'},]
				this.MYPOST({
					'method':'dgate',
					'pname':'f_wmsa_y_jianhuo',
					'i':this.FNULLE([
					'opmode','Y_ZCPS_Z_qryjhrq',
					'kqid', _self.ryuser.kqid,
					'czyid',_self.ryuser.operatorid,
					'ck_storeid',_self.editForm.ck_storeid,
					'djtype',_self.editForm.djtype,
					'bill',_self.editForm.bill,
					])
					},'查询已装车',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
					if(ret_iserr){ //传入的true参数,理论上不会有此回调了
						_self.$toast.fail('查询失败')
						_self.$store.commit('hideLoading');
					}else{
						var rtn_json_obj = null;
						_self.$store.commit('hideLoading');
						if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
						}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
						}
						console.log("查询查询已装车")
						_self.yzcTableData = rtn_json_obj
						console.log(_self.yzcTableData)
						// _self.isWZCCarVisible = true
					}
				});
		},
		_getWZCBtn(czType){
      console.log(czType)
          var _self = this;
          var ldemodata = [{retval:0, errmsg:'返回数据集'},]
          this.MYPOST({
            'method':'dgate',
            'pname':'f_wmsa_y_jianhuo',
            'i':this.FNULLE([
              'opmode','Y_ZCPS_W_qryjhrq',
              'kqid', _self.ryuser.kqid,
              'czyid',_self.ryuser.operatorid,
              'ck_storeid',_self.editForm.ck_storeid,
              'djtype',_self.editForm.djtype,
              'bill',_self.editForm.bill,
              'jhrq',_self.editForm.jhrq,
            ])
            },'查询未装车',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
            if(ret_iserr){ //传入的true参数,理论上不会有此回调了
              _self.$toast.fail('查询失败')
              _self.$store.commit('hideLoading');
            }else{
              var rtn_json_obj = null;
              _self.$store.commit('hideLoading');
              if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
              }else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
              }
              console.log("查询查询未装车")
              console.log(rtn_json_obj)
              _self.wzcTableData = rtn_json_obj
              if(_self.wzcTableData.length == 0){
                _self.$dialog.alert({
                  title:'提示',
                  message:'暂未查到未装车门店',
                })
              }else if(_self.wzcTableData.length >= 1){
                if(czType == 'DD'){  //判断如果是点击，则显示装车弹窗
                  _self.isWZCCarVisible = true
                }else{ //判断如果是扫描枪，则保存
                  _self.editForm.jhrq = _self.wzcTableData[0].jhrq
                  _self.saveZhuangChe()
                }
              }
            }
          });
		},
		selectWZCCarClick(row){
			this.editForm.jhrq = row.jhrq
			this.isWZCCarVisible = false
			console.log(this.editForm)
			this.saveZhuangChe()
		},
		saveZhuangChe(){
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_y_jianhuo',
				'i':this.FNULLE([
				'opmode','Y_ZCPS_jyjhrq',
				'kqid', _self.ryuser.kqid,
				'czyid',_self.ryuser.operatorid,
				'ck_storeid',_self.editForm.ck_storeid,
				'djtype',_self.editForm.djtype,
				'bill',_self.editForm.bill,
				'jhrq',_self.editForm.jhrq,
				])
				},'未装车保存',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					console.log("查询未装车保存")
					console.log(rtn_json_obj[0])
					_self.editForm.yjtotqty = rtn_json_obj[0].yjtotqty
					if(rtn_json_obj[0].ret_ret == '0'){
							_self.$dialog.confirm({
							  title: '提示',
							  message:rtn_json_obj[0].ret_mess,
								confirmButtonColor:"#1989fa"
							}).then(() => {
							  console.log(_self.editForm)
								_self._getSaveZhuangChe()
                _self.editForm.jhrq = ''
							}) .catch(() => {
                _self.editForm.jhrq = ''
							});
					}
				}
			});
		},
		_getSaveZhuangChe(){
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_y_jianhuo',
				'i':this.FNULLE([
				'opmode','Y_ZCPS_qrjhrq',
				'kqid', _self.ryuser.kqid,
				'czyid',_self.ryuser.operatorid,
				'bill',_self.editForm.bill,
				'jhrq',_self.editForm.jhrq,
				'yjtotqty',_self.editForm.yjtotqty,
				])
				},'未装车提交为已装车',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					console.log("查询未装车提交为已装车")
					console.log(rtn_json_obj[0])
					_self.$toast(rtn_json_obj[0].ret_mess)
					_self._getYZCList()
				}
			});
		},
		zhuangcheQueRen(){
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_y_jianhuo',
				'i':this.FNULLE([
				'opmode','Y_ZCPS_zcjy',
				'kqid', _self.ryuser.kqid,
				'czyid',_self.ryuser.operatorid,
				'bill',_self.editForm.bill,
				'ck_storeid',_self.editForm.ck_storeid,
				'djtype',_self.editForm.djtype,
				])
				},'装车确认',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					console.log("查询装车确认")
					console.log(rtn_json_obj[0])
					_self.message = rtn_json_obj[0]
					if(rtn_json_obj[0].ret_ret == '-1'){
						_self.$toast.fail(rtn_json_obj[0].ret_mess)
						return
					}else{
						_self.carMessageIsShow = true
					}

				}
			});
		},
		_getZhuangCheBaoCun(){
			this.isdisabled = true
			var _self = this;
			var ldemodata = [{retval:0, errmsg:'返回数据集'},]
			this.MYPOST({
				'method':'dgate',
				'pname':'f_wmsa_y_jianhuo',
				'i':this.FNULLE([
				'opmode','Y_ZCPS_zcqr',
				'kqid', _self.ryuser.kqid,
				'czyid',_self.ryuser.operatorid,
				'bill',_self.editForm.bill,
				'ck_storeid',_self.editForm.ck_storeid,
				'jytotqty',_self.message.jytotqty,
				'tpmess',_self.message.tpmess,
				'jhrq',_self.editForm.jhrq,
				])
				},'装车保存',true, ldemodata, function(ret_obj, ret_iserr,ret_errmess,ret_oldresp){
				if(ret_iserr){ //传入的true参数,理论上不会有此回调了
					_self.$toast.fail('查询失败')
					_self.$store.commit('hideLoading');
				}else{
					var rtn_json_obj = null;
					_self.$store.commit('hideLoading');
					if(ret_obj != null){ rtn_json_obj = ret_obj; //返回的接口可以直接解析的情况
					}else{  rtn_json_obj = _self.arr2Obj(ret_oldresp.data); //非标准的dgate接口,返回的一个不兼容的处理
					}
					console.log("查询装车保存")
					console.log(rtn_json_obj[0])
					_self.$dialog.alert({
					  title:rtn_json_obj[0].ret_mess,
					  message:rtn_json_obj[0].ret_symess,
					}).then(() => {
					  // on close
							_self.editForm = {
								ck_storeid:'',
								djtype:'',
								bill:'',
								jhrq:'',
								yjtotqty:'',
							}
							_self.skuRow = {}

							_self.wzcTableData = []
							_self.yzcTableData = []
							_self.isdisabled = false
					});
				}
			});
		},
  },
  mounted() {

  },
	components: {
		DataTable,
		TablePopup
	},
};
</script>

<style lang="scss" scoped>
	// 引入公共样式
	@import '@/assets/css/base.scss';
	@import '@/assets/css/input.scss';
	div.zhengtuojianhuo{
		padding-top: 50px;
	}



div.storeWarp{
	font-size: 20px;
	font-weight:bold;
	.goodsName{
		margin-top:5px;
		margin-bottom:5px;
		span{
			display: inline-block;
			width:80px;
		}
	}

}


div.carCardWarp{
	width: 94%;
	margin-left: 3%;
	margin-right: 3%;
	margin-top: 20px;
	font-size: 20px;
	font-weight: bold;
	div.carCard{
		border-left: 5px solid #4998FF;
		box-sizing: border-box;
		padding-left: 10px;
		padding-right: 10px;
		border-radius:5px;
		background-color: #fff;
		padding-top: 10px;
		padding-bottom: 10px;
		margin-bottom:15px;
		div.goodRow{
			margin-bottom:8px;
			span{
				display: inline-block;
				width:100px;
			}
		}
		div.goodsTitleRow{
			display: flex;
			width: 100%;
			div.goodsTitleLabel{
				width: 100px;
			}
			div.skuNoTitle{
				width: calc(100% - 100px);
			}
		}
	}
}


.savefooterBtn{
	display: flex;
	justify-content: flex-end;
	button{
		border-radius: 20px;
		width: 120px;
		height:40px;
		font-weight: bold;
		font-size: 20px;
	}
}

.messageConTitle{
	margin-top: 10px;
	font-size: 20px;
	font-weight: bold;
	color: #666;
}



.goodsNameWarp{
	font-size: 20px;
	display: flex;
	margin-bottom:5px;
	font-weight: bold;
	display: flex;
	flex: 1;
	span{
		display: block;
	}
	.label{
		width:100px;
	}
	.value{
		line-height: 22px;
		width: calc(100% - 100px);
	}
}


.tableWarp{
  width: 96%;
  margin: 0 auto;
}


</style>
